<template>
<div>
  <div class="home">
    <HeadView />  
    <!-- bg -->
    <div class="home_one content">
      <el-row :gutter="0" align="middle">
          <el-col :span="13" :xs="24" class="wow slideInRight phone">
            <div class="bgimg tranx">
              <img src="@/assets/img/bg.png" alt="" >
            </div>
          </el-col>
          <el-col :span="11" :xs="24" class="wow slideInLeft">
            <div class="left">
              <h3>
                Buy And Trade <br />
                Cryptos Like <br />
                Never <i class="yec">Before.</i>
              </h3>
              <span>
                Buy and trade cryptos like never before.Buy and<br />
                trade cryptos like never before.Buy and trade<br /> 
                cryptos like never before.Buy and trade cryptos.
              </span>
              <div class="btn">Download App</div>
            </div>
          </el-col>
          <el-col :span="13" :xs="24" class="wow slideInRight web">
            <div class="bgimg tranx">
              <img src="@/assets/img/bg.png" alt="" >
            </div>
          </el-col>
        </el-row>
    </div>  
    <div class="home_ul content">
      <h3 class="wow slideInLeft">Buy And Trade Cryptos Like Never <i class="yec">Before.</i></h3>
      <ul class="wow slideInRight">
        <li>
          <img src="@/assets/img/ic1.png" alt="" >
          <span>Partners-ape</span>
        </li>
        <li>
          <img src="@/assets/img/ic2.png" alt="" >
          <span>Partners-cro</span>
        </li>
        <li>
          <img src="@/assets/img/ic3.png" alt="" >
          <span>Partners-ftm</span>
        </li>
        <li>
          <img src="@/assets/img/ic4.png" alt="" >
          <span>Partners-qnt</span>
        </li>
        <li>
          <img src="@/assets/img/ic5.png" alt="" >
          <span>Partners-ht</span>
        </li>
        <li>
          <img src="@/assets/img/ic6.png" alt="" >
          <span>Partners-ens</span>
        </li>
        <li>
          <img src="@/assets/img/ic7.png" alt="" >
          <span>Partners-ftt</span>
        </li>
      </ul>
    </div>
    <div class="home_one home_tow content">
      <el-row :gutter="0" align="middle">
        <el-col :span="13" :xs="24" class="wow slideInRight phone">
            <div class="bgimg">
              <img src="@/assets/img/bg1.png" alt="" >
            </div>
          </el-col>
          <el-col :span="11" :xs="24" class="wow slideInLeft">
            <div class="left">
              <h3>
                More convenient<br />
                and fast <i class="yec">chat.</i>
              </h3>
              <span class="spa_c">
                Buy and trade cryptos like never before.Buy and trade <br /> cryptos like never before.
              </span>
              <div class="list">
                <ul>
                  <li>
                    <img src="@/assets/img/right.png" alt="">
                    <h4>NFT held for more than 30 days</h4>
                  </li>
                  <li>
                    <img src="@/assets/img/right.png" alt="">
                    <h4>Authenticated by Twitter</h4>
                  </li>
                  <li>
                    <img src="@/assets/img/right.png" alt="">
                    <h4>Understand the relevant specifications of SEER DAO</h4>
                  </li>
                </ul>
              </div>
              <div class="btn">Download App</div>
            </div>
          </el-col>
          <el-col :span="13" :xs="24" class="wow slideInRight web">
            <div class="bgimg">
              <img src="@/assets/img/bg1.png" alt="" >
            </div>
          </el-col>
        </el-row>
    </div> 

    <div class="home_one home_tow home_tow_t content">
      <el-row :gutter="0" align="middle">
          <el-col :span="9" :xs="24" class="wow slideInLeft">
            <div class="bgimg">
              <img src="@/assets/img/bg2.png" alt="" >
            </div>
          </el-col>
          <el-col :span="15" :xs="24" class="wow slideInRight">
            <div class="left">
              <h3>
                A crypto wallet<br />
                from the <i class="yec">future.</i>
              </h3>
              <span class="spa_c">
                Buy and trade cryptos like never before.Buy and trade <br /> cryptos like never before.
              </span>
              <div class="list">
                <ul>
                  <li>
                    <img src="@/assets/img/right.png" alt="">
                    <h4>NFT held for more than 30 days</h4>
                  </li>
                  <li>
                    <img src="@/assets/img/right.png" alt="">
                    <h4>Authenticated by Twitter</h4>
                  </li>
                  <li>
                    <img src="@/assets/img/right.png" alt="">
                    <h4>Understand the relevant specifications of SEER DAO</h4>
                  </li>
                </ul>
              </div>
            </div>
          </el-col>
          
        </el-row>
    </div> 

    <div class="home_down">
      <div class="content">
        <el-row :gutter="0" align="middle">
        <el-col :span="12" :xs="24" class="wow slideInLeft">
            <div class="bgimg">
              <img src="@/assets/img/bg3.png" alt="" >
            </div>
          </el-col>
          <el-col :span="12" :xs="24" class="wow slideInRight">
            <div class="left">
              <h3>
                Want To Have Your<br />
                Own Exchange?
              </h3>
              <span>
                Buy and trade cryptos like never before.Buy and trade<br /> cryptos like never before.
              </span>
              <div>
                <div class="btn">Download App</div>
              </div>
              
            </div>
          </el-col>
        </el-row>
      </div>
      
    </div> 

    <div class="home_four content">
      <h3>
        Buy and trade cryptos<br /> like never <i class="yec">before.</i>
      </h3>
      <p>Buy and trade cryptos like never before.Buy and trade cryptos like never<br /> before.
          Buy and trade cryptos like never before.Buy and trade cryptos.
      </p>
      <el-row :gutter="0" align="middle">
          <el-col :span="12"  class="wow slideInLeft">
            <div style="border-right:1px solid #434343;">
              <img src="@/assets/img/bb1.png" alt="" >
              <h4>Send & Receive Easy</h4>
              <span>
                Buy and trade cryptos like never before.Buy and trade cryptos like never before.
              </span>
            </div>
          </el-col>
          <el-col :span="12"  class="wow slideInLeft">
            <div>
              <img src="@/assets/img/bb2.png" alt="" >
              <h4>Send & Receive Easy</h4>
              <span>
                Buy and trade cryptos like never before.Buy and trade cryptos like never before.
              </span>
            </div>
          </el-col>
          <el-col :span="12"  class="wow slideInLeft">
            <div style="border-right:1px solid #434343;border-top:1px solid #434343;">
              <img src="@/assets/img/bb3.png" alt="" >
              <h4>Send & Receive Easy</h4>
              <span>
                Buy and trade cryptos like never before.Buy and trade cryptos like never before.
              </span>
            </div>
          </el-col>

          <el-col :span="12"  class="wow slideInLeft">
            <div style="border-top:1px solid #434343;">
              <img src="@/assets/img/bb4.png" alt="" >
              <h4>Send & Receive Easy</h4>
              <span>
                Buy and trade cryptos like never before.Buy and trade cryptos like never before.
              </span>
            </div>
          </el-col>
      </el-row>
      
    </div>
    
    <div class="home_link">
      <div class="home_one content">
      <el-row :gutter="0" align="middle">
          <el-col :span="12" :xs="24" class="wow slideInLeft">
            <div class="left">
              <h3>
                <i class="yec">Download</i> Beelink<br />
                Of The Future Today.
              </h3>
              <span>
                Buy and trade cryptos like never before.Buy and<br />
                trade cryptos like never before.Buy and trade<br /> 
                cryptos like never before.Buy and trade cryptos.
              </span>
              <div>
                <div class="btn">Download App</div>
              </div>
              
            </div>
          </el-col>
          <el-col :span="12" :xs="24" class="wow slideInRight">
            <div class="bgimg tranx">
              <img src="@/assets/img/bg4.png" alt="" >
            </div>
          </el-col>
      </el-row>
    </div> 
    </div>

    <FooterView />
  </div>
  <ElBacktop :right="20" />
</div>
</template>

<script>
// @ is an alias to /src
import WOW from "wow.js";
import HeadView from '@/components/HeadView.vue'
import FooterView from '@/components/FooterView.vue'
import { ElBacktop } from 'element-plus'
// import { useI18n } from 'vue-i18n';

export default {
  name: 'HomeView',
  data(){
    return {
    }
  },
  mounted(){
    var wow = new WOW();
    wow.init();
  },
  methods: {
  },
  
  components: {
    HeadView,
    ElBacktop,
    FooterView
  }
}

</script>

<style lang="less" scoped>
.bgimg img{width: 100%;}
  h3{
      font-size: 64px;
      font-weight: bold;
      line-height: 84px;
  }
  p,span{font-size: 18px;}
  .home_one{
    padding-bottom: 140px;
    .left{
      p{
        font-size: 64px;font-weight: bold;
        line-height: 72px;
        i{color: #FFD900;}
      }
      span{padding:20px 0 40px;display: block;}
      .btn{
        width: auto;text-align: center;
      }
    }
    .bgimg img{width: 100%;margin-top: 50px;}
    .tranx{animation: tranx 2.5s infinite linear;}
    .spa_c{color: #C2C2C2;}
    .list ul{
      margin-bottom: 60px;
      li{
        display: flex;align-items: center;
        margin-bottom: 30px;
        img{width: 24px;height: 24px;padding-right: 14px;}
      }
    } 
  }
  .home_ul{
    padding-bottom: 180px;
    h3{font-size: 32px;text-align: center;}
    ul{
      display: flex;justify-content: space-between;align-items: center;
      margin-top: 50px;
      li{
        display: flex;justify-content: center;align-items: center;
        border: 1px solid #434343;border-radius: 8px;
        padding:16px 12px;
        font-size: 13px;
        img{width: 24px;padding-right: 6px;}
      }
    }
  }

  .home_tow_t{
    .left{
      width: 66%;
      margin: 0 auto;
    }
  }
  .home_tow{
    .bgimg img{
      margin: 0;
    }
  }
  .home_down{
    background: #FFD900;
    margin: 150px 0;
    color: #000;
    span{
      padding: 20px 0 40px;
      font-weight: bold;
      display: inline-block;
    }
    .btn{
      border: 1px solid #000;
      border-radius: 30px;
    }
  }
  .home_link{
    background-color: #141414;
    padding-top: 50px;
  }
  .home_four{
    padding-bottom: 140px;
    h3{
      text-align: center;
    }
    p{
      color: #C2C2C2;
      text-align: center;
      margin-bottom: 120px;
    }
    .wow div{
      display: flex;
      justify-content: center;
      flex-direction: column;
      align-items: center;
      img{width:100px ;}
      padding: 50px 0;
      h4{font-size: 36px;margin: 10px 0;}
      span{color: #C2C2C2;font-size: 18px;text-align: center; width: 75%;}
    }
  }
  
  @keyframes tranx {
    0% {
      transform: translateY(0); /*360*/
    }
    50% {
      transform: translateY(20px); /*0 */
    }
    100% {
      transform: translateY(0); /*0 */
    }
  }


  @media (max-width:768px) {
    .btn{
      font-size: 14px;
      height: 40px;
      line-height: 40px;
      padding: 0 20px;
    }
    .content{
        width: 94%;
        max-width: none;
        padding-left:3% !important;
        padding-right:3% !important;
    }
    .phone {
      display: block;
    }
    .web {
      display: none;
    }

    h3{
      font-size: 36px;
      font-weight: bold;
      line-height: 46px;
    }
    p,span{font-size: 14px;}


    .home_one{
      padding-bottom: 60px;
      .bgimg img{
        width: 80%;
        margin: 0 auto 30px;
      }
      .left{display: flex;align-items: center;flex-direction: column;text-align: center;}
      .list ul {
        margin-bottom: 20px;
        li{
          text-align: left;
          img{
            width: 18px;
            height: 18px;
            padding-right: 10px;
          }
        }
      }
    } 

    .home_ul{
      padding: 30px 0 60px;
      ul{flex-wrap: wrap;}
      ul li{
        width: 48%;
        padding: 8px 0;
        margin-bottom: 10px;
        
      }
    }

    .home_tow_t .left{width: 100%;}
    .home_down{
      margin: 0;
      padding-bottom: 40px;
      .bgimg img{
        width: 50%;
        margin: 0 auto 30px;
      }
      span{padding:10px 0 20px 0;}
    }

    .home_four{
      padding: 50px 0;
      p{margin: 10px 0 50px;}
      .wow div{
        padding: 20px 0;
        img{height: 50px;width: auto;}
        h4{font-size: 15px;}
        span{font-size: 12px;overflow: hidden;text-align: left;}
      }
    }

    .home_link .bgimg img{
      margin: 30px auto 0;
    }


  }


  
</style>
